۸ شهریور ۱۴۰۴فارسی

موقعیت‌یابی قدرتمند و آگاه از برخورد را در CSS فعال کنید. بیاموزید چگونه @position-try و موقعیت‌یابی لنگری چالش‌های پیچیده UI مانند تولتیپ‌ها و پاپ‌اورها را حل کرده و وابستگی به جاوا اسکریپت را کاهش می‌دهند.

فراتر از Absolute: نگاهی عمیق به @position-try و موقعیت‌یابی لنگری در CSS

برای دهه‌ها، توسعه‌دهندگان وب با مجموعه‌ای از چالش‌های رایج در رابط کاربری دست و پنجه نرم کرده‌اند: ایجاد تولتیپ‌ها، پاپ‌اورها، منوهای متنی و دیگر عناصر شناوری که به طور هوشمند موقعیت خود را نسبت به یک عنصر فعال‌کننده تنظیم می‌کنند. رویکرد سنتی تقریباً همیشه شامل یک رقص ظریف بین `position: absolute` در CSS و مقدار زیادی جاوا اسکریپت برای محاسبه موقعیت‌ها، تشخیص برخورد با ویوپورت و تغییر مکان عنصر در لحظه بوده است.

این راه‌حل مبتنی بر جاوا اسکریپت، با وجود کارآمدی، مشکلات خاص خود را به همراه دارد: سربار عملکردی، پیچیدگی نگهداری و یک نبرد دائمی برای قوی نگه داشتن منطق. کتابخانه‌هایی مانند Popper.js دقیقاً به این دلیل به استانداردهای صنعتی تبدیل شدند که حل این مشکل به صورت بومی بسیار دشوار بود. اما اگر می‌توانستیم این استراتژی‌های پیچیده موقعیت‌یابی را مستقیماً در CSS تعریف کنیم چه؟

اینجاست که CSS Anchor Positioning API وارد می‌شود، یک پیشنهاد پیشگامانه که قرار است انقلابی در نحوه مدیریت این سناریوها ایجاد کند. در هسته آن دو مفهوم قدرتمند وجود دارد: توانایی «لنگر انداختن» یک عنصر به عنصر دیگر، صرف نظر از رابطه آنها در DOM، و مجموعه‌ای از قوانین جایگزین که با @position-try تعریف می‌شوند. این مقاله یک کاوش جامع در این مرز جدید در CSS ارائه می‌دهد و شما را برای ساخت رابط‌های کاربری مقاوم‌تر، کارآمدتر و اعلانی‌تر توانمند می‌سازد.

مشکل دیرینه موقعیت‌یابی سنتی

قبل از اینکه بتوانیم ظرافت راه‌حل جدید را درک کنیم، ابتدا باید محدودیت‌های راه‌حل قدیمی را بفهمیم. ابزار اصلی موقعیت‌یابی پویا همیشه `position: absolute` بوده است که یک عنصر را نسبت به نزدیک‌ترین والد موقعیت‌دار خود قرار می‌دهد.

عصای جاوا اسکریپت

یک تولتیپ ساده را در نظر بگیرید که باید بالای یک دکمه ظاهر شود. با `position: absolute`، می‌توانید آن را به درستی قرار دهید. اما وقتی آن دکمه نزدیک لبه بالایی پنجره مرورگر باشد چه اتفاقی می‌افتد؟ تولتیپ بریده می‌شود. یا اگر نزدیک لبه سمت راست باشد؟ تولتیپ سرریز کرده و یک اسکرول‌بار افقی ایجاد می‌کند.

برای حل این مشکل، توسعه‌دهندگان به طور تاریخی به جاوا اسکریپت تکیه کرده‌اند:

دریافت موقعیت و ابعاد عنصر لنگر با استفاده از `getBoundingClientRect()`.
دریافت ابعاد تولتیپ.
دریافت ابعاد ویوپورت (`window.innerWidth`, `window.innerHeight`).
انجام یک سری محاسبات برای تعیین مقادیر ایده‌آل `top` و `left`.
بررسی اینکه آیا این موقعیت ایده‌آل باعث برخورد با لبه‌های ویوپورت می‌شود یا خیر.
اگر چنین شد، محاسبه مجدد برای یک موقعیت جایگزین (مثلاً، برگرداندن آن برای نمایش در زیر دکمه).
افزودن event listener برای `scroll` و `resize` تا هر زمان که چیدمان ممکن است تغییر کند، کل این فرآیند تکرار شود.

این مقدار قابل توجهی منطق برای کاری است که به نظر می‌رسد یک وظیفه صرفاً نمایشی است. این کد شکننده است، اگر با دقت پیاده‌سازی نشود می‌تواند باعث پرش چیدمان (layout jank) شود و به حجم بسته (bundle size) و کار روی رشته اصلی (main-thread work) برنامه شما می‌افزاید.

یک پارادایم جدید: معرفی موقعیت‌یابی لنگری در CSS

CSS Anchor Positioning API یک روش اعلانی و فقط با CSS برای مدیریت این روابط فراهم می‌کند. ایده اصلی ایجاد یک اتصال بین دو عنصر است: عنصر موقعیت‌دار (مثلاً تولتیپ) و لنگر آن (مثلاً دکمه).

ویژگی‌های اصلی: `anchor-name` و `position-anchor`

جادو با دو ویژگی جدید CSS شروع می‌شود:

`anchor-name`: این ویژگی به عنصری که می‌خواهید به عنوان نقطه مرجع استفاده کنید، اعمال می‌شود. این ویژگی به طور موثر به لنگر یک نام منحصر به فرد با پیشوند دو خط تیره می‌دهد که می‌توان در جای دیگر به آن ارجاع داد.
`position-anchor`: این ویژگی به عنصر موقعیت‌دار اعمال می‌شود و به آن می‌گوید که از کدام لنگر نام‌گذاری شده برای محاسبات موقعیت‌یابی خود استفاده کند.

بیایید به یک مثال ساده نگاه کنیم:

            
<!-- HTML Structure -->
<button id="my-button">Hover Me</button>
<div class="tooltip">This is a tooltip!</div>

<!-- CSS -->
#my-button {
  anchor-name: --my-button-anchor;
}

.tooltip {
  position: absolute;
  position-anchor: --my-button-anchor;
  /* Now we can position relative to the anchor */
  bottom: anchor(top);
  left: anchor(center);
}

در این قطعه کد، دکمه به عنوان یک لنگر به نام `--my-button-anchor` تعیین شده است. سپس تولتیپ از `position-anchor` برای پیوند دادن خود به آن لنگر استفاده می‌کند. بخش واقعاً انقلابی تابع `anchor()` است که به ما امکان می‌دهد از مرزهای لنگر (`top`, `bottom`, `left`, `right`, `center`) به عنوان مقادیر برای ویژگی‌های موقعیت‌یابی خود استفاده کنیم.

این کار از قبل همه چیز را ساده‌تر می‌کند، اما هنوز مشکل برخورد با ویوپورت را حل نکرده است. اینجاست که @position-try وارد عمل می‌شود.

قلب راه‌حل: `@position-try` و `position-fallback`

اگر موقعیت‌یابی لنگری پیوند بین عناصر را ایجاد می‌کند، `@position-try` هوشمندی را فراهم می‌کند. این به شما امکان می‌دهد یک لیست اولویت‌بندی شده از استراتژی‌های موقعیت‌یابی جایگزین تعریف کنید. سپس مرورگر هر استراتژی را به ترتیب امتحان می‌کند و اولین استراتژی را انتخاب می‌کند که به عنصر موقعیت‌دار اجازه می‌دهد بدون بریده شدن در بلوک دربرگیرنده خود (معمولاً ویوپورت) قرار گیرد.

تعریف گزینه‌های جایگزین (Fallback)

یک بلوک `@position-try` مجموعه‌ای نام‌گذاری شده از قوانین CSS است که یک گزینه موقعیت‌یابی واحد را تعریف می‌کند. شما می‌توانید هر تعداد از این‌ها را که نیاز دارید ایجاد کنید.

            
/* Option 1: Place above the anchor */
@position-try --tooltip-top {
  bottom: anchor(top);
  left: anchor(center);
  transform: translateX(-50%);
}

/* Option 2: Place below the anchor */
@position-try --tooltip-bottom {
  top: anchor(bottom);
  left: anchor(center);
  transform: translateX(-50%);
}

/* Option 3: Place to the right of the anchor */
@position-try --tooltip-right {
  left: anchor(right);
  top: anchor(center);
  transform: translateY(-50%);
}

/* Option 4: Place to the left of the anchor */
@position-try --tooltip-left {
  right: anchor(left);
  top: anchor(center);
  transform: translateY(-50%);
}

توجه کنید که چگونه هر بلوک یک استراتژی موقعیت‌یابی کامل را تعریف می‌کند. ما چهار گزینه متمایز ایجاد کرده‌ایم: بالا، پایین، راست و چپ نسبت به لنگر.

اعمال جایگزین‌ها با `position-fallback`

هنگامی که بلوک‌های `@position-try` خود را دارید، با ویژگی `position-fallback` به عنصر موقعیت‌دار می‌گویید که از آنها استفاده کند. ترتیب مهم است—این اولویت را تعریف می‌کند.

            
.tooltip {
  position: absolute;
  position-anchor: --my-button-anchor;
  position-fallback: --tooltip-top --tooltip-bottom --tooltip-right --tooltip-left;
}

با این یک خط CSS، شما به مرورگر دستور داده‌اید:

ابتدا، سعی کن تولتیپ را با استفاده از قوانین موجود در `--tooltip-top` موقعیت‌دهی کنی.
اگر آن موقعیت باعث بریده شدن تولتیپ توسط ویوپورت شد، آن را نادیده بگیر و قوانین موجود در `--tooltip-bottom` را امتحان کن.
اگر آن هم شکست خورد، `--tooltip-right` را امتحان کن.
و اگر همه راه‌ها شکست خورد، `--tooltip-left` را امتحان کن.

مرورگر تمام تشخیص برخورد و تغییر موقعیت را به طور خودکار انجام می‌دهد. بدون `getBoundingClientRect()`، بدون event listener برای `resize`، بدون جاوا اسکریپت. این یک تغییر بزرگ از منطق دستوری جاوا اسکریپت به یک رویکرد اعلانی در CSS است.

یک مثال کامل و کاربردی: پاپ‌اور آگاه از برخورد

بیایید یک مثال قوی‌تر بسازیم که موقعیت‌یابی لنگری را با Popover API مدرن ترکیب می‌کند تا یک مؤلفه UI کاملاً کاربردی، قابل دسترس و هوشمند ایجاد کنیم.

مرحله ۱: ساختار HTML

ما از ویژگی بومی `popover` استفاده خواهیم کرد که به ما مدیریت حالت (باز/بسته)، قابلیت بستن با کلیک بیرون (light-dismiss) و مزایای دسترسی‌پذیری را به صورت رایگان می‌دهد.

            
<button popovertarget="my-popover" id="popover-trigger">
  Click Me
</button>

<div id="my-popover" popover>
  <h3>Popover Title</h3>
  <p>This popover will intelligently reposition itself to stay within the viewport. Try resizing your browser or scrolling the page!</p>
</div>

مرحله ۲: تعریف لنگر (Anchor)

ما دکمه خود را به عنوان لنگر تعیین می‌کنیم. بیایید مقداری استایل پایه نیز اضافه کنیم.

            
#popover-trigger {
  /* This is the key part */
  anchor-name: --popover-anchor;

  /* Basic styles */
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

مرحله ۳: تعریف گزینه‌های `@position-try`

اکنون آبشار گزینه‌های موقعیت‌یابی خود را ایجاد می‌کنیم. ما در هر مورد یک `margin` کوچک اضافه می‌کنیم تا کمی فاصله بین پاپ‌اور و فعال‌کننده ایجاد شود.

            
/* Priority 1: Position above the trigger */
@position-try --popover-top {
  bottom: anchor(top, 8px);
  left: anchor(center);
}

/* Priority 2: Position below the trigger */
@position-try --popover-bottom {
  top: anchor(bottom, 8px);
  left: anchor(center);
}

/* Priority 3: Position to the right */
@position-try --popover-right {
  left: anchor(right, 8px);
  top: anchor(center);
}

/* Priority 4: Position to the left */
@position-try --popover-left {
  right: anchor(left, 8px);
  top: anchor(center);
}

نکته: تابع `anchor()` می‌تواند یک آرگومان دوم اختیاری بگیرد که به عنوان مقدار جایگزین عمل می‌کند. با این حال، در اینجا ما از یک سینتکس غیراستاندارد برای نشان دادن یک بهبود بالقوه در آینده برای حاشیه‌ها استفاده می‌کنیم. روش صحیح امروز استفاده از `calc(anchor(top) - 8px)` یا مشابه آن خواهد بود، اما هدف ایجاد یک فاصله است.

مرحله ۴: استایل‌دهی پاپ‌اور و اعمال جایگزین

در نهایت، پاپ‌اور خود را استایل‌دهی کرده و همه چیز را به هم متصل می‌کنیم.

            
#my-popover {
  /* Link the popover to our named anchor */
  position-anchor: --popover-anchor;

  /* Define the priority of our fallback options */
  position-fallback: --popover-top --popover-bottom --popover-right --popover-left;

  /* We must use fixed or absolute positioning for this to work */
  position: absolute;

  /* Default styles */
  width: 250px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin: 0; /* The popover API adds margin by default, we reset it */
}

/* The popover is hidden until opened */
#my-popover:not(:popover-open) {
  display: none;
}

و تمام! با این کد، شما یک پاپ‌اور کاملاً کاربردی دارید که به طور خودکار موقعیت خود را تغییر می‌دهد تا از بریده شدن توسط لبه‌های صفحه جلوگیری کند. برای منطق موقعیت‌یابی نیازی به جاوا اسکریپت نیست.

مفاهیم پیشرفته و کنترل دقیق‌تر

Anchor Positioning API کنترل بیشتری برای سناریوهای پیچیده ارائه می‌دهد.

نگاهی عمیق‌تر به تابع `anchor()`

تابع `anchor()` فوق‌العاده همه‌کاره است. این فقط مربوط به چهار لبه نیست. شما می‌توانید درصدهایی از اندازه لنگر را نیز هدف قرار دهید.

`anchor(left)` یا `anchor(start)`: لبه چپ لنگر.
`anchor(right)` یا `anchor(end)`: لبه راست.
`anchor(top)`: لبه بالا.
`anchor(bottom)`: لبه پایین.
`anchor(center)`: مرکز افقی یا عمودی، بسته به زمینه. برای `left` یا `right`، مرکز افقی است. برای `top` یا `bottom`، مرکز عمودی است.
`anchor(50%)`: معادل `anchor(center)`.
`anchor(25%)`: نقطه‌ای در 25% از محور لنگر.

علاوه بر این، شما می‌توانید از ابعاد لنگر در محاسبات خود با تابع `anchor-size()` استفاده کنید:

            
.element {
  /* Make the element half the width of its anchor */
  width: calc(anchor-size(width) * 0.5);
}

لنگرهای ضمنی (Implicit Anchors)

در برخی موارد، شما حتی نیازی به تعریف صریح `anchor-name` و `position-anchor` ندارید. برای روابط خاص، مرورگر می‌تواند یک لنگر ضمنی را استنباط کند. رایج‌ترین مثال یک پاپ‌اور است که توسط یک دکمه `popovertarget` فراخوانی می‌شود. در این حالت، دکمه به طور خودکار به لنگر ضمنی برای پاپ‌اور تبدیل می‌شود و CSS شما را ساده‌تر می‌کند:

            
#my-popover {
  /* No position-anchor is needed! */
  position-fallback: --popover-top --popover-bottom;
  ...
}

این کار کدهای تکراری (boilerplate) را کاهش می‌دهد و رابطه بین فعال‌کننده و پاپ‌اور را حتی مستقیم‌تر می‌کند.

پشتیبانی مرورگرها و مسیر پیش رو

تا اواخر سال 2023، CSS Anchor Positioning API یک فناوری آزمایشی است. این ویژگی در گوگل کروم و مایکروسافت اج پشت یک فلگ ویژگی (در `chrome://flags` عبارت "Experimental Web Platform features" را جستجو کنید) در دسترس است.

در حالی که هنوز برای استفاده در تولید در همه مرورگرها آماده نیست، حضور آن در یک موتور مرورگر اصلی نشان‌دهنده تعهد قوی برای حل این مشکل دیرینه CSS است. برای توسعه‌دهندگان بسیار مهم است که با آن آزمایش کنند، به فروشندگان مرورگر بازخورد دهند و برای آینده‌ای آماده شوند که در آن جاوا اسکریپت برای موقعیت‌یابی عناصر به استثنا تبدیل شود، نه قاعده.

شما می‌توانید وضعیت پذیرش آن را در پلتفرم‌هایی مانند "Can I use..." دنبال کنید. در حال حاضر، آن را به عنوان ابزاری برای بهبود تدریجی (progressive enhancement) در نظر بگیرید. شما می‌توانید رابط کاربری خود را با `@position-try` بسازید و از یک کوئری `@supports` برای ارائه یک موقعیت ساده‌تر و بدون تغییر برای مرورگرهایی که از آن پشتیبانی نمی‌کنند استفاده کنید، در حالی که کاربران مرورگرهای مدرن تجربه بهبود یافته را دریافت می‌کنند.

کاربردهای فراتر از پاپ‌اورها

کاربردهای بالقوه این API بسیار گسترده است و فراتر از تولتیپ‌های ساده است.

منوهای انتخاب سفارشی: منوهای کشویی `